// editableList.js
"use client";

import React, { Component } from "react";
import { Cross2Icon } from "@radix-ui/react-icons";
import { DndContext, closestCenter } from "@dnd-kit/core";
import {
  arrayMove,
  SortableContext,
  verticalListSortingStrategy,
} from "@dnd-kit/sortable";
import SortableItem from "./SortableItem";
import styles from "./index.module.scss";

const initialItems = [
  { id: "P1", text: "Company Overview" },
  { id: "P2", text: "RFP Summary" },
  { id: "P3", text: "AI Analysis Result" },
  { id: "P4", text: "Comparative Evaluation" },
  { id: "P5", text: "Comparative Evaluation" },
  { id: "P6", text: "Comparative Evaluation" },
  { id: "P7", text: "Comparative Evaluation" },
  { id: "P8", text: "Comparative Evaluation" },
];

class EditableList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: initialItems,
      editingId: null,
    };
  }

  handleEdit = (id, value) => {
    if (!value || value.trim() === "") {
      this.handleDelete(id);
      return;
    }
    this.setState((prevState) => ({
      items: prevState.items.map((item) =>
        item.id === id ? { ...item, text: value } : item
      ),
    }));
  };

  handleDelete = (id) => {
    this.setState((prevState) => ({
      items: prevState.items.filter((item) => item.id !== id),
    }));
  };

  handleDragEnd = (event) => {
    const { active, over } = event;
    if (active.id !== over.id) {
      const oldIndex = this.state.items.findIndex((item) => item.id === active.id);
      const newIndex = this.state.items.findIndex((item) => item.id === over.id);
      this.setState((prevState) => ({
        items: arrayMove(prevState.items, oldIndex, newIndex),
      }));
    }
  };

  handleAdd = () => {
    const newId = `P${this.state.items.length + 1}`;
    this.setState((prevState) => ({
      items: [...prevState.items, { id: newId, text: "" }],
      editingId: newId,
    }));
  };

  render() {
    const { items, editingId } = this.state;

    return (
      <div>
        <DndContext collisionDetection={closestCenter} onDragEnd={this.handleDragEnd}>
          <SortableContext items={items} strategy={verticalListSortingStrategy}>
            <div className={styles.listContainer}>
              {items.map((item, index) => (
                <SortableItem
                  key={item.id}
                  id={item.id}
                  index={index}
                  text={item.text}
                  onClick={() => console.log(index, "click")}
                  isEditing={editingId === item.id}
                  onEditStart={() => this.setState({ editingId: item.id })}
                  onEditEnd={(value) => {
                    console.log(value, "pppppp");
                    this.handleEdit(item.id, value);
                    this.setState({ editingId: null });
                  }}
                  onDelete={this.handleDelete}
                />
              ))}
            </div>
          </SortableContext>
        </DndContext>
        <button className={styles.addBtn} onClick={this.handleAdd}>
          <span>+</span>Continue to add
        </button>
      </div>
    );
  }
}

export default EditableList;
